<template>
	<view id="my">
		<u--image src="/static/images/myBackground.png" width="100%"></u--image>
		<text class="navigationTitle">我的</text>
		<view class="content">
			<view class="contentBox">
				<!-- 用户信息 -->
				<view class="info">
					<u-avatar :size="48"
						src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg">
					</u-avatar>
					<view class="infoRight">
						<text class="name">刘丽君</text>
						<text class="myTag myTag_warning">教师</text>
						<view class="phoneNum">18977911231</view>
					</view>
				</view>
				<!-- 用户设置 -->
				<view class="userSettings">
					<view class="settingsOption">
						<u--image src="/static/my-icons/phone.svg" width="48rpx"
							height="48rpx"></u--image>
						<text>已绑定</text>
					</view>
					<view class="settingsOption">
						<u--image src="/static/my-icons/settings.svg"
							width="48rpx" height="48rpx"></u--image>
						<text>直达管理</text>
					</view>
					<view class="settingsOption">
						<u--image src="/static/my-icons/info.svg" width="48rpx"
							height="48rpx"></u--image>
						<text>关于</text>
					</view>
				</view>
			</view>
			<view class="contentBox settingsBox">
				<view class="titleBox">
					<text class="title">我的直达</text>
				</view>
				<view class="settingsInnerBox">
					<view class="settingsBoxOption">
						<u--image src="/static/my-icons/wddb.svg"
							width="56rpx" height="56rpx"></u--image>
							<text>我的待办</text>
					</view>
					<view class="settingsBoxOption">
						<u--image src="/static/my-icons/jcqr.svg"
							width="56rpx" height="56rpx"></u--image>
							<text>借出确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	#my {
		height: 100vh;
		background: #F6F6F6;

		.navigationTitle {
			position: absolute;
			top: 106rpx;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 36rpx;
		}

		.content {
			position: absolute;
			top: 196rpx;
			left: 30rpx;

			.contentBox {
				width: 686rpx;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 28rpx 60rpx 34rpx 28rpx;
				margin-bottom: 20rpx;

				.info {
					display: flex;

					.infoRight {
						margin-left: 32rpx;

						.name {
							font-size: 36rpx;
							font-weight: 500;
							color: #202D42;
						}

						.myTag {
							display: inline-block;
							margin-left: 14rpx;
							padding: 0 24rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
						}

						.myTag_warning {
							color: #FFA45E;
							background-color: #FFF4EC;
							border: 2rpx solid #FFE7D5;
						}

						.phoneNum {
							color: #202D41;
							font-size: 28rpx;
						}
					}
				}

				.userSettings {
					display: flex;
					justify-content: space-between;

					.settingsOption {
						display: flex;
						margin-top: 64rpx;

						text {
							color: #666666;
							font-size: 28rpx;
							margin-left: 8rpx;
							padding-top: 4rpx;
						}
					}
				}
			}
			
			.settingsBox {
				padding: 24rpx 16rpx 42rpx 18rpx;
				
				.titleBox {
					padding-left: 16rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #F5F7F9;
					margin-bottom: 40rpx;
					
					title {
						font-size: 32rpx;
						color: #202D41;
						font-weight: 500;
					}
				}
				
				.settingsInnerBox {
					display: flex;
					flex-wrap: wrap;
					padding: 0 18rpx;
					
					.settingsBoxOption {
						margin-right: 58rpx;
						
						::v-deep .u-image {
							margin: 0 auto;
						}
						
						text {
							color: #666666;
							font-size: 24rpx;
						}
					}
				}
			}
		}

	}
</style>
